<template>
  <div>
    <navheader></navheader>
    <div class="productdetail">
      <div class="detailcontent">
        <div class="productimg">
          <img :src="result[0].goodscover" alt="" />
        </div>
        <div class="detail">
          <div class="detail-l">
            <span>¥</span>
            <i>{{ result[0].price }}</i>
          </div>
          <div class="detail-r">
            <span>{{ result[0].description }}</span>
            <i></i>
          </div>
        </div>
      </div>
      <div class="product-bottom">
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" dot @click="robot"/>
          <van-goods-action-icon icon="cart-o" text="购物车" :badge="mycart" @click="turnmycart" />
          <van-goods-action-icon icon="star-o" text="收藏" @click="addstore" />
          <van-goods-action-button type="warning" text="加入购物车" @click="show=true"/>
          <van-goods-action-button type="danger" text="立即购买" @click="pay" />
          <van-popup duration='0.3'  round v-model="storepop">
            <span  style="padding:5px;font-size:16px;border-radius:12px;">收藏成功</span>
          </van-popup>
          <van-popup :style="{width:'300px',height:'50px',lineheigh:'50px',textalign:'center'}" duration='0.3'  round v-model="succeed">
                  已经添加至购物车
          </van-popup>
          <van-popup get-container="#text"  v-model="show" round position="bottom" :style="{ height: '40%' }" closeable >
              <div class="pop-header">
                  <div class="head-l">
                      <img :src="result[0].goodscover" alt="">
                  </div>
                  <div class="head-r">
                      <span>¥</span>
                      <i>{{result[0].price}}</i>
                  </div>
              </div>
          
              <div class="numview">
                  <div class="title">
                      <span>购买数量</span>
                  </div>
                  <div class="numcontrol">
                      <div class="inmun" @click="num++">
                          +
                      </div>
                      <div class="shownum">
                          {{num<1?1:num}}
                      </div>
                      <div class="denum" @click="num--">
                          -
                      </div>
                  </div>
              </div>
              <div class="pop-bottom">
                  <span @click="addmycart">确定</span>  
              </div>
          </van-popup>
        </van-goods-action>
      </div>
     
    </div>
  </div>
</template>
<style scoped lang="scss">
.pop-bottom{
    position: absolute;
    bottom: 20px;
    left: 47px;
    width:300px;
    margin: 0 auto;
    span{
        display: block;
        margin: 0 auto;
        background-color: rgb(236, 58, 3);
        color: #fff;
        font-weight: 900;
        border-radius: 20px;
    }
}
.numview{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #222;
    padding: 10px;
    margin-top: 30px;
    .numcontrol{
        width: 80px;
        display: flex;
        justify-content: space-between;
    }
}
.pop-header{
    display: flex;

    justify-content: start;
    .head-l{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        line-height: 40px;
        img{
            width: 50px;
            height: 50px;
        }
    }
    .head-r{
        display: flex;
        align-items: center;
        margin-left: 10px;
        margin-top: 20px;
        span{
            font-size: 12px;
            color: red;
            font-weight: 600px;
        }
        i{
            font-size: 18px;
            color: red;
            font-weight: 800;
        }
    }
}
.detail {
  width: 355px;
  padding: 10px;

  margin: 0 auto;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content:left;
  background-color: #fafafa;
  // color: red;
  .detail-l {
    display: flex;
    align-items: left;
    justify-content: start;
    span {
      margin-top: 9px;
      text-align: left;
      font-size: 12px;
      text-align: left;
      color: rgb(204, 17, 0);
    
    }
    i {
     margin-left: 4px;
      text-align: left;
      font-size: 20px;
      text-align: left;
      color: rgb(204, 17, 0);
    }
  }
  .detail-r {
    display: flex;
    justify-content: left;
    align-items: left;
    margin-top: 10px;
    font-size: 10px;
    span {
      text-align: left;
    }
  }
}
.productdetail {
  margin-top: 20px;
  .detailcontent {
    margin-top: 70px;
    img {
      width: 375px;
      height: 200px;
      border-radius: 5px;
    }
  }
}
</style>
<script>
import navheader from "../components/herder";
import "../http/request";
import { goodssearchFunc, mycartFunc } from "../http/request";
import { storeAllFunc } from "../http/store";

export default {
  components: {
    navheader,
  },
  data() {
    return {
      goodsid: "",
      mycart: 0,
      result: {},
      userid: "",
      goods: {},
      show:false,
      succeed:false,
       storepop:false,
      num:1,
     
    };
  },
  methods: {
      pay(){
        this.$router.push('/pay')
      },
    robot(){
          this.$router.push('/robot')
    },
    turnmycart(){
          this.$router.push('/mycart')
    },
    addstore() {
    this.storepop=true
      let data = {};
      data.userid = localStorage.getItem("userid");
      data.goodsid = localStorage.getItem("goodsid");
      data.goodcover=this.result[0].goodscover
      data.goodsname=this.result[0].goodsname
      storeAllFunc("/store/add", data).then((data) => {
        //   console.log(data);
      });
    },
    addmycart(){
        this.show=false;
        this.succeed=true
        let data={};
        data.userid = localStorage.getItem("userid");
        data.goodsid = localStorage.getItem("goodsid");
        data.num=this.num;
        data.cover=this.result[0].goodscover
        data.price=this.result[0].price
        data.goodsname=this.result[0].goodsname
        storeAllFunc("/mycart/add",data).then(data=>{          
        })
    }
  },
  created() {
    console.log("商品详情页");
    this.goodsid = localStorage.getItem("goodsid");
    this.userid = localStorage.getItem("userid");
    goodssearchFunc("/goods/querygoods", { gid: this.goodsid }).then((data) => {
      this.result = data;
      
      localStorage.setItem('goodscover',this.result[0].goodscover)
      localStorage.setItem('price',this.result[0].price)
    });
    mycartFunc("/mycart", { uid: this.userid }).then((data) => {
      this.mycart = data.length;
      console.log("mycart", data, this.userid);
    });
  },
};
</script>
